<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户新增</title>
    <th:block th:include="~{common/common::commonHead}"/>
</head>
<body data-width="620" data-height="420">
<div class="container-fluid">
    <form class="form-horizontal" role="form" th:action="@{/user/addUser}">
        <div class="form-group">
            <label class="col-xs-4 control-label">用户姓名：</label>
            <div class="col-xs-8">
                <div class="iconic-input right">
                    <input id="realName" name="realName" type="text" class="form-control spinner" placeholder="1~20位字符"
                           required minlength="1" maxlength="20">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label">用户名：</label>
            <div class="col-xs-8">
                <div class="iconic-input right">
                    <input id="username" name="username" type="text" class="form-control spinner" placeholder="1~20位字符"
                           required minlength="1" maxlength="20">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label">用户密码：</label>
            <div class="col-xs-8">
                <div class="iconic-input right">
                    <input id="password" name="password" type="password" class="form-control spinner"
                           placeholder="6~16位字符串" required minlength="6" maxlength="16">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-4 control-label">所属组织：</label>
            <div class="col-xs-8">
                <select name="orgId" id="orgId" class="form-control spinner" data-url="org/listOrg"
                        data-value-field="id" data-text-field="orgName" data-value=""
                        required>
                    <option value="">请选择组织</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label">所属角色：</label>
            <div class="col-xs-8">
                <select id="roleId" name="roleId" class="form-control spinner" disabled required>
                    <option value="">请先选择组织</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label">用户状态：</label>
            <div class="col-xs-8">
                <select name="userStatus" class="form-control spinner" data-url="user/listUserStatus"
                        data-value-field="value" data-text-field="desc"></select>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script>
    var $roleId = $("#roleId");
    $("#orgId").on("change", function () {
        // 先锁住下拉框，防止加载数据时用户更改
        $(this).attr("disabled", true);
        var that = this;
        var value = $(that).val();
        $(this).find("option[value='']").remove();
        $.doAjax("role/listRole",{orgId: value}, function (roleList) {
            $roleId.empty().attr("disabled", false).append($("<option value=''>请选择角色</option>"));
            $roleId.val("");
            roleList.forEach(function (role) {
                var option = $("<option></option>");
                option.attr("value", role.id);
                option.text(role.roleName);
                $("#roleId").append(option);
            });
            $(that).attr("disabled", false);
        });
    });
</script>